<template>
  <div id="page-modal-container">
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :mask="false"
      :closable="false"
      :footer="null"
      :zIndex="4000"
      :getContainer="getContainer"
      @cancel="closeModal()"
      transitionName="fade"
    >
      <div class="system-add-container" v-loading="pageLoading">
        <div class="header" :header="pageTitle"></div>
        <div class="main">
          <a-form-model ref="form" :model="form" :rules="formRules">
            <custom-collapse :activeKey="activeKey" :panelList="panelList">
              <template slot="space_1">
                <div class="hazard-source">
                  <div class="source-img">
                    <bjUploadImg
                      :viewMode="operate == 2 ? true : false"
                      :count="1"
                      v-model="form.imageList"
                      @change="upLoadImage($event)"
                      @remove="deleteImage($event)"
                      replaceField="imagePath"
                    ></bjUploadImg>
                  </div>
                  <div class="source-info">
                    <a-row :gutter="20" style="margin-right: 50px">
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="危险源名称" prop="changeName">
                          <a-input
                            v-model.trim="form.changeName"
                            placeholder="请输入危险源名称"
                            :maxLength="200"
                          />
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item
                          label="过程(区域)"
                          prop="changeProcess"
                        >
                          <a-input
                            v-model.trim="form.changeProcess"
                            placeholder="请输入过程(区域)"
                            :maxLength="250"
                          />
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="责任人" prop="leader">
                          <a-input
                            v-model.trim="form.leader"
                            placeholder="请输入责任人"
                            :maxLength="250"
                          />
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="危险源状态" prop="status">
                          <a-select
                            v-model="form.status"
                            :allowClear="true"
                            style="width: 160px"
                            placeholder="请选择危险源状态"
                          >
                            <a-select-option value="1"> 开启 </a-select-option>
                            <a-select-option value="2"> 关闭 </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="危险等级" prop="changeLevel">
                          <a-select
                            v-model="form.changeLevel"
                            :allowClear="true"
                            style="width: 160px"
                            placeholder="请选择危险等级"
                          >
                            <a-select-option
                              :value="item.dicValue"
                              v-for="(item, index) in leaveSource"
                              :key="index"
                            >
                              {{ item.dicDesc }}
                            </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item
                          label="行为(活动)设备或环境"
                          prop="changeAction"
                        >
                          <a-input
                            v-model.trim="form.changeAction"
                            placeholder="请输入行为(活动)设备或环境"
                            :maxLength="250"
                          />
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item label="分部分项">
                          <a-input
                            v-model.trim="form.distributionItems"
                            placeholder="请输入分部分项"
                            :maxLength="250"
                          />
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        :lg="24"
                        :xl="12"
                        :xxl="12"
                      >
                        <a-form-model-item
                          label="是否在地图展示"
                          prop="isDisplay"
                        >
                          <a-select
                            v-model="form.isDisplay"
                            :allowClear="true"
                            style="width: 160px"
                            placeholder="请选择是否在地图展示"
                            @change="changeDisplay($event)"
                          >
                            <a-select-option value="1"> 是 </a-select-option>
                            <a-select-option value="2"> 否 </a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </a-col>
                      <a-col
                        :xs="24"
                        :sm="24"
                        :md="24"
                        v-if="form.isDisplay == 1"
                      >
                        <a-form-model-item
                          ref="lng"
                          label="经纬度坐标"
                          prop="lng"
                        >
                          <div class="input-row">
                            <a-input
                              placeholder="请选择经度"
                              v-model="form.lng"
                              disabled
                            />
                            <a-input
                              placeholder="请选择纬度"
                              v-model="form.lat"
                              disabled
                            />
                            <a-button type="primary" @click="reset()">
                              重置
                            </a-button>
                          </div>
                          <div class="map-container">
                            <div id="project-map"></div>
                            <div class="search-wrap">
                              <a-radio-group
                                name="radioGroup"
                                v-model="map.type"
                              >
                                <a-radio :value="1">按关键字搜索</a-radio>
                                <a-radio :value="2">按坐标搜索</a-radio>
                              </a-radio-group>
                              <div class="input-container">
                                <div class="input-body">
                                  <a-input
                                    v-if="map.type == 1"
                                    placeholder="关键字搜索"
                                    v-model="map.keyWord"
                                  />
                                  <template v-if="map.type == 2">
                                    <a-input
                                      placeholder="请输入经度"
                                      v-model="map.geox"
                                    />
                                    <div style="line-height: 30px">,</div>
                                    <a-input
                                      placeholder="请输入纬度"
                                      v-model="map.geoy"
                                    />
                                  </template>
                                </div>
                                <div class="search" @click="serachMap()">
                                  <a-icon
                                    type="search"
                                    :style="{
                                      fontSize: '20px',
                                      color: '#fff',
                                    }"
                                  />
                                </div>
                              </div>
                            </div>
                          </div>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </template>
              <template slot="space_2">
                <a-row :gutter="20" style="margin-right: 50px">
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
                    <a-form-model-item
                      label="潜在危险因素"
                      prop="potentialDanage"
                    >
                      <a-input
                        v-model.trim="form.potentialDanage"
                        placeholder="请输入潜在危险因素"
                        :maxLength="250"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
                    <a-form-model-item label="可能导致结果" prop="result">
                      <a-input
                        v-model.trim="form.result"
                        placeholder="请输入可能导致结果"
                        :maxLength="250"
                      />
                    </a-form-model-item>
                  </a-col>

                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <a-form-model-item label="控制措施" prop="changeMeasures">
                      <a-input
                        v-model.trim="form.changeMeasures"
                        placeholder="请输入控制措施"
                        type="textarea"
                        :rows="4"
                        :maxLength="250"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <a-form-model-item label="备注">
                      <a-input
                        v-model.trim="form.remark"
                        placeholder="请输入备注"
                        type="textarea"
                        :rows="4"
                        :maxLength="250"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </template>
              <template slot="space_3">
                <div class="table-container">
                  <vxe-table
                    :data="tableData"
                    show-overflow
                    show-header-overflow
                    show-footer-overflow
                    :column-config="{ resizable: true }"
                    class="scrollbarStyle"
                    :sort-config="{ trigger: 'cell' }"
                    ref="xTable"
                    :edit-rules="validRules"
                  >
                    <vxe-column
                      type="seq"
                      title="序号"
                      width="80"
                      align="center"
                    ></vxe-column>
                    <vxe-column field="item" title="检查项">
                      <template slot-scope="scope">
                        <vxe-input
                          v-model="scope.row.item"
                          placeholder="请输入检查项"
                          :maxLength="250"
                          @change="$refs.xTable.updateStatus(scope)"
                        ></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column field="content" title="检查内容">
                      <template slot-scope="scope">
                        <vxe-input
                          v-model="scope.row.content"
                          placeholder="请输入检查内容"
                          :maxLength="250"
                          @change="$refs.xTable.updateStatus(scope)"
                        ></vxe-input>
                      </template>
                    </vxe-column>
                    <vxe-column title="操作" fixed="right" width="180">
                      <template slot-scope="scope">
                        <a-button
                          @click="addRows()"
                          type="primary"
                          icon="plus"
                          size="small"
                        >
                          添加
                        </a-button>
                        <a-button
                          @click="delRows(scope.$rowIndex)"
                          type="danger"
                          icon="delete"
                          size="small"
                        >
                          删除
                        </a-button>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </div>
              </template>
              <template slot="space_4">
                <a-row :gutter="20" style="margin-right: 50px">
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
                    <a-form-model-item
                      label="上传附件"
                      prop="fileList"
                      :rules="{
                        required: false,
                        message: '请选择附件',
                      }"
                    >
                      <bjUploadFile
                        :viewMode="operate == 2 ? true : false"
                        :count="20"
                        v-model="form.fileList"
                        @change="upLoadFile($event)"
                        @download="download($event)"
                        @preview="viewFile($event)"
                        :replaceFields="{
                          fileName: 'realFileName',
                          fileSize: 'fileSize',
                          fileType: 'fileType',
                          fileUrl: 'fileUrl',
                        }"
                      ></bjUploadFile>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </template>
            </custom-collapse>
          </a-form-model>
        </div>
        <div class="footer">
          <a-button @click="closeModal()">取消 </a-button>
          <a-button type="primary" @click="save()" :loading="buttonLoading">
            确定
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import bjUploadFile from "@/components/bj-upload-file";
import bjUploadImg from "@/components/bj-upload-img";
import {
  getDangerManageAdd,
  getDangerManageUpdate,
  getDangerManageDetail,
  filePath,
} from "@/api/wisdom-beam/security-app.js";
import { getDickeyList } from "@/api/common.js";
import {
  getProInitGeo,
  downFileByUrl,
  notificationTip,
  commonViewFile,
} from "@/utils";
let mapInstance = null;
export default {
  name: "customModal",
  components: {
    bjUploadFile,
    bjUploadImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          let { operate } = this.parameter;
          this.operate = operate;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      //1新增 3编辑
      operate: "",
      pageTitle: "新增",
      //折叠面板
      activeKey: ["1", "2", "3", "4"],
      panelList: [
        {
          key: "1",
          header: "危险源信息",
        },
        {
          key: "2",
          header: "基本信息",
        },
        {
          key: "3",
          header: "检查内容（必填一项）",
        },
        {
          key: "4",
          header: "附件信息",
        },
      ],
      //检查内容
      tableData: [
        {
          item: "",
          content: "",
        },
      ],
      validRules: {
        item: [{ required: true, message: "请输入" }],
        content: [{ required: true, message: "请输入" }],
      },
      //form表单
      form: {
        //危险源名称
        changeName: "",
        //过程（区域）
        changeProcess: "",
        //责任人
        leader: undefined,
        //危险源状态
        status: undefined,
        //危险等级
        changeLevel: undefined,
        //行为活动设备或环境
        changeAction: "",
        //分部分项
        distributionItems: "",
        //潜在危险因素
        potentialDanage: "",
        //可能导致结果
        result: "",
        //控制措施
        changeMeasures: "",
        //备注
        remark: "",
        //检查内容-检查项 多个“||”隔开
        item: "",
        //检查内容-检查内容 多个“||”隔开
        content: "",
        //是否在地图展示
        isDisplay: undefined,
        //纬度
        lat: "",
        //经度
        lng: "",
        //附件
        fileList: [],
        //图片
        imageList: [],
      },
      formRules: {
        changeName: [
          {
            required: true,
            message: "请输入危险源名称",
          },
        ],
        changeProcess: [
          {
            required: true,
            message: "请输入过程（区域）",
          },
        ],
        leader: [
          {
            required: true,
            message: "请输入责任人",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择危险源状态",
          },
        ],
        changeLevel: [
          {
            required: true,
            message: "请选择危险等级",
          },
        ],
        changeAction: [
          {
            required: true,
            message: "请选择行为活动设备或环境",
          },
        ],
        potentialDanage: [
          {
            required: true,
            message: "请输入潜在危险因素",
          },
        ],
        result: [
          {
            required: true,
            message: "请输入可能导致结果",
          },
        ],
        changeMeasures: [
          {
            required: true,
            message: "请输入控制措施",
          },
        ],
        isDisplay: [
          {
            required: true,
            message: "请选择是否在地图展示",
          },
        ],
        lng: [
          {
            required: true,
            message: "请选择经纬度",
          },
        ],
      },
      pageLoading: false,
      buttonLoading: false,
      //地图
      map: {
        type: 1,
        keyWord: "",
        geox: "",
        geoy: "",
        marker: null,
      },
      leaveSource: [],
    };
  },

  mounted() {},
  methods: {
    getData() {
      this.pageTitle = this.operate == 3 ? "编辑" : "新增";
      this.getRiskLevelData();
      let { id } = this.parameter;
      if (id) {
        this.getDetail();
      }
    },

    //查询风险等级
    getRiskLevelData() {
      getDickeyList({ dictKey: "danger_hazard_level" })
        .then((res) => {
          let { data } = res;
          this.leaveSource = data?.result || [];
        })
        .catch((_) => {
          this.leaveSource = [];
        });
    },
    //表格新增
    addRows() {
      this.tableData.push({
        item: "",
        content: "",
      });
    },
    //表格删除
    delRows(index) {
      if (this.tableData.length == 1) {
        return notificationTip("warning", "检查内容（必填一项）");
      }
      this.tableData.splice(index, 1);
    },
    //是否在地图展示
    changeDisplay() {
      if (this.form.isDisplay == 1) {
        this.$nextTick(() => {
          this.initMap();
          mapInstance.on("click", (e) => {
            this.form.lng = e.lnglat.lng;
            this.form.lat = e.lnglat.lat;
            this.addMapMarker(e.lnglat);
          });
        });
      } else {
        this.form.lng = "";
        this.form.lat = "";
        mapInstance && mapInstance.destroy();
      }
    },

    //初始化地图服务
    initMap() {
      this.center = getProInitGeo();
      mapInstance = new AMap.Map("project-map", {
        zoom: 12,
        center: this.center,
        viewMode: "3D",
      });
    },

    // 重置
    reset() {
      this.form.lng = "";
      this.form.lat = "";
      this.map.keyWord = "";
      mapInstance && mapInstance.clearMap();
      mapInstance.setCenter(this.center);
    },

    //地图搜索
    serachMap() {
      var that = this;
      if (that.map.type == 2) {
        if (!that.map.geox || !that.map.geoy) return;
        that.addMapMarker(new AMap.LngLat(that.map.geox, that.map.geoy));
        mapInstance.setCenter([that.map.geox, that.map.geoy]);
        that.form.lng = that.map.geox;
        that.form.lat = that.map.geoy;
        return;
      }
      if (!that.map.keyWord) return;
      mapInstance.plugin(["AMap.PlaceSearch"], function () {
        var placeSearch = new AMap.PlaceSearch({
          city: "全国",
          autoFitView: true,
        });
        placeSearch.search(that.map.keyWord, async function (status, result) {
          if (status == "complete") {
            if (result.poiList.pois.length == 0) {
              return;
            }
            that.addMapMarker(result.poiList.pois[0].location);
            that.form.lng = result.poiList.pois[0].location.lng;
            that.form.lat = result.poiList.pois[0].location.lat;
          }
          mapInstance.setFitView();
        });
      });
    },

    //添加自定义点标记
    addMapMarker(LngLat) {
      if (this.map.marker) {
        mapInstance.remove(this.map.marker);
      }
      this.map.marker = new AMap.Marker({
        position: LngLat,
      });
      mapInstance.add(this.map.marker);
    },

    //上传图片
    upLoadImage({ file, index }) {
      this.$set(this.form["imageList"][index], "loading", true);
      setTimeout(() => {
        this.$set(this.form["imageList"][index], "loading", false);
      }, 500);
    },

    deleteImage({ file, index }) {
      this.form["imageList"].splice(index, 1);
    },

    //上传附件
    upLoadFile({ file, index }) {
      this.$set(this.form["fileList"][index], "loading", true);
      setTimeout(() => {
        this.$set(this.form["fileList"][index], "loading", false);
      }, 500);
    },

    //关闭页面
    closeModal() {
      this.$refs.form.resetFields();
      this.tableData = [
        {
          item: "",
          content: "",
        },
      ];
      this.map = {
        type: 1,
        keyWord: "",
        geox: "",
        geoy: "",
        marker: null,
      };
      this.form = {
        //危险源名称
        changeName: "",
        //过程（区域）
        changeProcess: "",
        //责任人
        leader: undefined,
        //危险源状态
        status: undefined,
        //危险等级
        changeLevel: undefined,
        //行为活动设备或环境
        changeAction: "",
        //分部分项
        distributionItems: "",
        //潜在危险因素
        potentialDanage: "",
        //可能导致结果
        result: "",
        //控制措施
        changeMeasures: "",
        //备注
        remark: "",
        //检查内容-检查项 多个“||”隔开
        item: "",
        //检查内容-检查内容 多个“||”隔开
        content: "",
        //是否在地图展示
        isDisplay: undefined,
        //经度
        lat: "",
        //纬度
        lng: "",
        //附件
        fileList: [],
        //图片
        imageList: [],
      };
      this.$emit("update:visible", false);
    },

    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const $table = this.$refs.xTable;
          const errMap = await $table.validate(true).catch((errMap) => errMap);
          if (!errMap) {
            this.buttonLoading = true;
            let { form, tableData } = this;
            let {
              conditions: { orgCode },
            } = this.$parent.$parent.$data;
            let josn = {
              zhgdDeptCode: orgCode?.key || "",
              //危险源名称
              changeName: form.changeName,
              //过程（区域）
              changeProcess: form.changeProcess,
              //责任人
              leader: form.leader,
              //危险源状态
              status: form.status,
              //危险等级
              changeLevel: form.changeLevel,
              //行为活动设备或环境
              changeAction: form.changeAction,
              //分部分项
              distributionItems: form.distributionItems,
              //潜在危险因素
              potentialDanage: form.potentialDanage,
              //可能导致结果
              result: form.result,
              //控制措施
              changeMeasures: form.changeMeasures,
              //备注
              remark: form.remark,
              //检查内容-检查项 多个“||”隔开
              item: tableData.map((v) => v.item).join("||"),
              //检查内容-检查内容 多个“||”隔开
              content: tableData.map((v) => v.content).join("||"),
              isDisplay: form.isDisplay,
              lat: form.lat,
              lng: form.lng,
            };
            let formdata = new FormData();
            Object.entries(josn).forEach(([key, value]) => {
              formdata.append(key, value);
            });
            //风险源图片
            if (form.imageList.length > 0) {
              for (let i = 0; i < form.imageList.length; i++) {
                if (form.imageList[i].file) {
                  formdata.append("imageDanger", form.imageList[i].file);
                } else {
                  formdata.append("imageDanger", new File([], "file"));
                }
              }
            } else {
              formdata.append("imageDanger", new File([], "file"));
            }
            //附件
            if (form.fileList.length > 0) {
              for (let i = 0; i < form.fileList.length; i++) {
                if (form.fileList[i].file) {
                  formdata.append("uploadFiles", form.fileList[i].file);
                } else {
                  formdata.append("uploadFiles", new File([], "file"));
                }
              }
            } else {
              formdata.append("uploadFiles", new File([], "file"));
            }
            let { id } = this.parameter;
            if (!id) {
              //新增
              getDangerManageAdd(formdata)
                .then((res) => {
                  notificationTip("success", "新增成功");
                  this.closeModal();
                  this.$parent.getTableData();
                  this.$parent.$parent.getStepAreaData();
                })
                .catch((_) => {})
                .finally((_) => {
                  this.buttonLoading = false;
                });
            } else {
              //编辑
              let fileIds = form.fileList.map((v) => v.id).toString();
              formdata.append("fileIds", fileIds);
              formdata.append("id", id);
              getDangerManageUpdate(formdata)
                .then((res) => {
                  notificationTip("success", "编辑成功");
                  this.closeModal();
                  this.$parent.getTableData();
                  this.$parent.$parent.getStepAreaData();
                })
                .catch((_) => {})
                .finally((_) => {
                  this.buttonLoading = false;
                });
            }
          }
        }
      });
    },

    //查询详情
    getDetail() {
      this.pageLoading = true;
      return new Promise((resolve, reject) => {
        let { id } = this.parameter;
        getDangerManageDetail(id)
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.form.zhgdDeptCode = result.zhgdDeptCode;
            this.form.changeName = result.changeName;
            this.form.changeProcess = result.changeProcess;
            this.form.leader = result.leader;
            this.form.status = result.status;
            this.form.changeLevel = Number(result.changeLevel);
            this.form.changeAction = result.changeAction;
            this.form.distributionItems = result.distributionItems;
            this.form.potentialDanage = result.potentialDanage;
            this.form.result = result.result;
            this.form.changeMeasures = result.changeMeasures;
            this.form.remark = result.remark;
            this.form.isDisplay = result.isDisplay;
            this.form.lat = result.lat;
            this.form.lng = result.lng;

            //是否展示地图
            if (this.form.isDisplay == 1) {
              this.$nextTick(() => {
                this.initMap();
                if (result.lng && result.lat) {
                  this.addMapMarker(new AMap.LngLat(result.lng, result.lat));
                  mapInstance.setCenter([
                    Number(result?.lng),
                    Number(result?.lat),
                  ]);
                }
                mapInstance.on("click", (e) => {
                  this.form.lng = e.lnglat.lng;
                  this.form.lat = e.lnglat.lat;
                  this.addMapMarker(e.lnglat);
                });
              });
            }
            //检查内容
            let itemsArray = result.zhgdDangerCheckItems || [];
            this.tableData = [];
            itemsArray.forEach((dox) => {
              this.tableData.push({
                item: dox.name,
                content: dox.content,
              });
            });
            if (result?.annImg) {
              this.form.imageList = [{ imagePath: result?.annImg || "" }];
            }
            //附件
            this.form.fileList = result.configFiles || [];
            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },

    //下载附件
    download(file) {
      let { realFileName, id } = file;
      filePath(id)
        .then((res) => {
          let fileUrl = res.data?.result || "";
          if (fileUrl)
            downFileByUrl(fileUrl + "&attname=" + realFileName, realFileName);
        })
        .catch((_) => {});
    },

    //附件预览
    viewFile(file) {
      let { id } = file;
      commonViewFile("beam", id);
    },

    getContainer() {
      return document.getElementById("page-modal-container");
    },
  },
  destroyed() {
    mapInstance && mapInstance.destroy();
  },
};
</script>

<style lang="less" scoped>
.system-add-container {
  height: 100%;
  padding: 10px 10px 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;
    .hazard-source {
      .flex();
      .source-img {
        flex-shrink: 0;
        padding: 20px 20px 0 20px;
      }
      .source-info {
        flex: 1;
        .input-row {
          .flex();
          .ant-input {
            flex: 1;
            margin-right: 8px;
          }
          .ant-btn {
            width: 86px;
            margin: 0;
          }
        }
        .map-container {
          width: 100%;
          height: 340px;
          position: relative;
          .box-sizing();
          border: 2px solid #fff;
          border-radius: 4px;
          .search-wrap {
            width: 351px;
            position: absolute;
            left: 10px;
            top: 10px;
            right: 10px;
            background: #ffffff;
            box-shadow: 0px 2px 3px 0px rgba(93, 93, 93, 0.34);
            border-radius: 4px;
            padding: 0 16px 12px;
          }
          .input-container {
            width: 100%;
            height: 30px;
            border-radius: 4px;
            overflow: hidden;
            background: #ffffff;

            .flex();
            .input-body {
              flex: 1;
              border: 1px solid #d4d7d8;
              border-radius: 4px 0px 0px 4px;
              .flex();
            }
            .ant-input {
              flex: 1;
              height: 28px;
              border-radius: 0;
              border: 0;
              margin: 0;
            }
            .ant-input:focus {
              box-shadow: 0 0 0;
            }
            .search {
              width: 60px;
              height: 30px;
              background: rgb(49, 131, 255);
              border: 1px solid rgb(49, 131, 255);
              border-radius: 0px 4px 4px 0px;
              text-align: center;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          #project-map {
            height: 100%;
            width: 100%;
          }
        }
      }
    }

    .table-container {
      padding: 0 30px 20px 30px;
      /deep/.vxe-table {
        .vxe-cell--title {
          &::before {
            content: "*";
            color: red;
            margin-right: 3px;
          }
        }
        .col--last,
        .col--seq {
          .vxe-cell {
            .vxe-cell--title {
              &::before {
                display: none;
              }
            }
          }
        }
      }
    }
  }
  .footer {
    border-top: 1px solid #f3f4f6;
    background-color: #fff;
    .flex();
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  //表单布局
  /deep/.ant-form-item {
    display: flex;
    .ant-form-item-label {
      width: 150px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      line-height: 20px;
      align-items: center;
      height: 36px;
      margin-right: 10px;
      label {
        color: #999999;
      }
    }
    .check-item-select {
      height: 126px;
      .ant-select-selection__rendered {
        height: 126px;
        .ant-select-selection__placeholder {
          margin-top: -40px !important;
        }
      }
    }
    .ant-select {
      width: 100% !important;
      min-width: unset !important;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

/deep/.ant-modal-root {
  .ant-modal-wrap {
    position: fixed;
    top: 64px;
    left: 240px;
    bottom: 0;
    right: 0;
    .ant-modal {
      width: calc(100vw - 240px) !important;
      top: 0;
      padding-bottom: 0;
      margin: 0;
      .ant-modal-content {
        background-color: #f3f4f6;
        box-shadow: none;
        .ant-modal-body {
          padding: 0;
          height: calc(100vh - 64px) !important;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
